<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-13 12:42:52
 * @LastEditTime: 2023-07-16 13:09:46
 * @FilePath: \myblog\src\mviews\MobileArticle.vue
-->
<template>
  <div class="blogm-articlelist">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list offset="150" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <router-link v-for="item in articleList" :key="item.id" :to="{name: 'mArticle', params: {id: item.id} }">
          <ArticleItem :article="item"/>
        </router-link>
      </van-list>
    </van-pull-refresh>
  </div>  
</template>

<script>
import QS from 'qs'
import ArticleItem from '@/mviews/components/ArticleItem.vue'
export default {
  components:{
    ArticleItem
  },
  data(){
    return {
      articleList: [],
      loading: false,
      finished: false,
      refreshing: false,
      size: 4,
      page: 1,
      q: ''
    }
  },
  props: {
    columnId: {
      type: String
    }
  },
created(){
},
mounted(){
  this.$EventBus.$on('search-article', (q) => {
    this.searchArticle(q)
  })
},
watch:{},
computed:{},
methods:{
  onRefresh() {
    this.page = 1;
    this.finished = false;
    this.loading = true;
    this.onLoad();
  },
  onLoad() {
    this.getArticles()
  },
  getQuery() {
    let column = this.columnId;
    let q = this.q || undefined;
    let query = JSON.parse(JSON.stringify({
      column,q
    }))
    return query
  },
  getArticles() {
    let data = {
      page: this.page,
      size: this.size
    }
    let query = this.getQuery()
    if (Object.entries(query).length > 0)
    {
      data.query = QS.stringify(query)
    }
    this.$api({type: 'articles', data}).then(data => {
      if (this.refreshing) {
          this.articleList = [];
          this.refreshing = false;
      }
    if (this.articleList.length >= data.total)
    {
      this.finished = true
      return 
    }
    this.articleList.push(...data.list)
      this.loading = false;
      this.page++;
  }).catch(err => {
    console.log(err)
  })
  },
  searchArticle(q) {
    this.q = q;
    this.refreshing = true;
    this.onRefresh();
  }
},
}
</script>
<style  scoped>
</style>